<template>
  <div class="choose">
    <div>
      <img class="top" src="../assets/banner-top.png">
      <img class="top logo1" src="../assets/banner-logo1.png">
      <img class="top logo2" style="opacity: 0;" src="../assets/banner-logo2.png">
    </div>
    <div style="margin-top: 12vw; padding-bottom: 20vw; background: #fff;">
      <mt-field label="姓名" placeholder="请输入姓名" v-model="form.name"></mt-field>
      <mt-field v-if="needVin" label="VIN" placeholder="请输入VIN(车辆识别码)" v-model="form.vin"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号码" v-model="form.phone"></mt-field>
      <mt-field v-if="needCode" label="验证码" placeholder="请输入短信验证码" v-model="form.code" disableClear>
        <span style="border: 1px solid #111f34; padding: 5px 12px" @click="sendMsg" v-if="sendTime < 0">获取验证码</span>
        <span style="border: 1px solid #111f34; padding: 5px 12px" v-if="sendTime >= 0">{{this.sendTime}}秒后重新获取</span>
      </mt-field>
      <div @click="pickProvince = true">
        <mt-field label="所在省份" v-model="form.province" placeholder="请选择省份" readonly disableClear>
          <img style="width: 20px" src="../assets/down.png">
        </mt-field>
      </div>
      <div @click="pickCity = !!form.province">
        <mt-field label="所在城市" v-model="form.cityName" readonly disableClear placeholder="请选择省份后选择城市">
          <img style="width: 20px" src="../assets/down.png">
        </mt-field>
      </div>
      <div @click="pickDealer = !!form.cityName">
        <mt-field label="专属网点" v-model="form.dealerName" readonly disableClear placeholder="请选择城市后选择网点">
          <img style="width: 20px" src="../assets/down.png">
        </mt-field>
      </div>
      <div @click="pickConsultant = !!form.dealerName">
        <mt-field label="专属顾问" v-model="form.consultantName" readonly disableClear placeholder="请选择网点后选择顾问">
            <img style="width: 20px" src="../assets/down.png">
        </mt-field>
      </div>
      <div class="submitBtn" @click="submit">
        认 证
      </div>
    </div>
    <mt-actionsheet :actions="provinceAction" v-model="pickProvince" />
    <mt-actionsheet :actions="cityAction" v-model="pickCity" />
    <mt-actionsheet :actions="dealerAction" v-model="pickDealer" />
    <mt-actionsheet :actions="consultantAction" v-model="pickConsultant" />
  </div>
</template>
<script>
import { getProvinceList, getCity } from '../api/city'
import { MessageBox, Indicator } from 'mint-ui'
import request from '../api/request'

const notNull = /^\S+$/
export default {
  async created () {
    // Indicator.open()
    let data = ""
    // let data = await request('/m/auth/search')
    // if (data.name) {
    //   this.needVin = true
    //   this.needCode = false
    // }
    // this.form = {
    //   ...this.form,
    //   ...data
    // }
    // Indicator.close()
  },
  data () {
    let provinceAction = getProvinceList().map(one => {
      return {
        name: one,
        method: () => {
          this.form.province = one
        }
      }
    })
    return {
      form: {
        name: '',
        province: '',
        cityName: '',
        phone: '',
        dealerCode: '',
        dealerName: '',
        consultantName: '',
        consultantId: '',
        code: '',
        vin: ''
      },
      needVin: true,
      needCode: true,
      timer: null,
      sendTime: -1,
      username: null,
      pickProvince: false,
      provinceAction,
      pickCity: false,
      cityAction: [],
      pickDealer: false,
      dealerAction: [],
      pickConsultant: false,
      consultantAction: []
    }
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    async submit () {
      let form = this.form
      if (!notNull.test(form.name)) {
        MessageBox.alert('姓名不能为空')
        return
      }
      if (!/^(1)\d{10}$/i.test(form.phone)) {
        MessageBox.alert('手机号格式错误')
        return
      }
      if (!notNull.test(form.dealerCode)) {
        MessageBox.alert('必须选择网点')
        return
      }
      if (this.needVin && !notNull.test(form.vin)) {
        MessageBox.alert('VIN不能为空')
        return
      }
      try {
        Indicator.open()
        // await request('/m/auth/submit', 'post', {
        //   ...form,
        //   siteNo: form.dealerCode,
        //   adviserId: form.consultantId
        // })
        Indicator.close()
        this.$router.replace({
          path: '/game'
        })
      } catch ({ code }) {
        if (code === 201) {
          this.needVin = true
        }
      }
    },
    async sendMsg () {
      if (/^(1)\d{10}$/i.test(this.form.phone)) {
        Indicator.open()
        // await request('/m/auth/send-sms', 'post', { phone: this.form.phone })
        Indicator.close()
        this.sendTime = 60
        this.timer = setInterval(() => {
          this.sendTime--
          if (this.sendTime < 0) {
            clearInterval(this.timer)
          }
        }, 1000)
      } else {
        MessageBox.alert('手机号格式错误')
      }
    }
  },
  watch: {
    'form.province' (value) {
      this.form.cityName = ''
      if (!value) {
        this.cityAction = []
        return
      }
      this.cityAction = getCity(value).map(one => {
        return {
          name: one,
          method: () => {
            this.form.cityName = one
          }
        }
      })
    },
    async 'form.cityName' (cityName) {
      this.form.dealerName = ''
      this.form.dealerCode = ''
      if (!cityName) {
        this.dealerAction = []
        return
      }
      // Indicator.open()
      let dealer = await request('/m/dealer/search', 'post', { cityName })
      this.dealerAction = dealer.map(one => {
        return {
          name: one.name,
          method: () => {
            this.form.dealerName = one.name
            this.form.dealerCode = one.code
          }
        }
      })
      // Indicator.close()
    },
    async 'form.dealerCode' (dealerCode) {
      this.form.consultantName = ''
      this.form.consultantId = ''
      if (!dealerCode) {
        this.consultantAction = []
        return
      }
      Indicator.open()
      let consultant = await request('/m/dealer/consultant', 'post', { dealerCode })
      this.consultantAction = consultant.map(one => {
        return {
          name: one.name,
          method: () => {
            this.form.consultantName = one.name
            this.form.consultantId = one.id
          }
        }
      })
      Indicator.close()
    }
  }
}
</script>
<style lang="scss" type="text/scss">
  body {
    background: #ececec;
  }

  .choose {
    .top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    .submitBtn {
      width: 90%;
      margin: 18px auto;
      color: #fff;
      background: #111f34;
      font-size: 18px;
      text-align: center;
      padding: 10px;
      border-radius: 100px;
    }
  }

  .mint-actionsheet-list {
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
</style>
